<template>
  <!-- 巡检计划/日历详情 -->
  <div class="calenderDetails-box">
    <table />
    <div class="return-btn">
      <div class="return">
        <span @click="goBack"></span>
      </div>
    </div>
    <div class="con-box">
      <div class="filter-box">
        <div class="filter-1 betweenbox" @click="filterInit">
          <div class="filter-left betweenbox">
            <div class="startbox item">
              <span>所属地市：</span>
              <div class="input-box">
                <el-select v-model="formData.company" size="small"  @change="filterInit" placeholder="请选择" clearable filterable>
                  <el-option
                    v-for="item in CompanyList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="endbox item">
              <span>变电站名称：</span>
              <div class="input-box">
                <el-select v-model="formData.substation" filterable size="small" @change="filterInit" placeholder="请选择" clearable >
                  <el-option
                    v-for="item in SubstationList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <!-- <div class="endbox item">
              <span>年份：</span>
              <div class="input-box">
                <el-date-picker v-model="year_value"
                                type="year"
                                placeholder="选择年">
                </el-date-picker>
              </div>
            </div>-->
            <div class="endbox item">
              <span>年月份：</span>
              <div class="input-box">
                <el-date-picker
                @click="filterInit"
                :clearable="false"
                :editable="false"
                  v-model="formData.time"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="选择月"
                ></el-date-picker>
              </div>
            </div>
          </div>
          <div class="filter-right centerbox">
            <el-button
              type="primary"
              @click="queryAuxRealtimeList"
              class="centerbox conditionQuryBtn"
              icon="el-icon-search"
            >查询</el-button>
          </div>
        </div>
      </div>
      <div class="table-box">
        <div class="date-box">
          <div class="theader-th betweenbox">
            <div class="week-box centerbox" v-for="(o,i) in weeknames" :key="i">
              <span>{{o}}</span>
            </div>
          </div>
          <div class="tbody-box">
            <div class="tbody-td startbox" v-for="(o,i) in newCalendar" :key="i">
              <p
                class="date-text centerbox"
                v-if="o.date"
                :style="{'background-color':getPlanStateColor(1)}"
              >
                <span>{{o.date}}</span>
              </p>
              <div class="cont-box colcenterbox">
                <div class="box">
                  <div
                    class="item centerbox"
                    @mouseenter="toMoreDetails('enter',v,i,b)"
                    @mouseleave="toMoreDetails('leave')"
                    @contextmenu.prevent="rightclick(v,$event)"
                    v-for="(v,b) in o.list"
                    :key="b"
                  >
                    <span>{{v.JHMC}}</span>
                  </div>
                </div>
              </div>
              <!-- 弹窗 -->
              <div
                class="details-box"
                v-if="itemSelected===i"
                :style="{left:calenderItem_x,top:calenderItem_y}"
              >
                <div class="header-tr betweenbox">
                  <div class="centerbox">
                    <span>变电站名称</span>
                  </div>
                  <div class="centerbox">
                    <span>任务名称</span>
                  </div>
                  <div class="centerbox">
                    <span>巡视开始时间</span>
                  </div>
                  <div class="centerbox">
                    <span>计划类型</span>
                  </div>
                  <div class="centerbox">
                    <span>计划状态</span>
                  </div>
                  <div class="centerbox">
                    <span>巡视结果</span>
                  </div>
                </div>
                <div class="tbody-tr betweenbox">
                  <div class="centerbox">
                    <span>{{calendar_item_info.BDZMC}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{calendar_item_info.JHMC}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{calendar_item_info.JHKSSJ}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{xjType[Number(calendar_item_info.XSLX)]}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{planStatus[Number(calendar_item_info.STATUS)]}}</span>
                  </div>
                  <div class="centerbox">
                    <span>{{xjResult[Number(calendar_item_info.XSJG)]}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右键菜单 -->
          <!-- <div class="popover" v-if="popoverStatus" :style="computedStyle">
            <el-button type="primary" @click="sure('update')">计划调整</el-button>
            <el-button type="primary" @click="sure('cancel')">计划取消</el-button>
          </div> -->
        </div>
      </div>
    </div>
    <el-dialog title="计划调整" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <!-- <PopUp /> -->
      <PlanManagement
        v-if="management_dialogVisible"
        @handleClose="handleClose"
        :tableSelect="newTableSelect"
      ></PlanManagement>
      <CancelManagement
        v-if="cancel_dialogVisible"
        @handleClose="handleClose"
        :tableSelect="newTableSelect"
      ></CancelManagement>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import PlanManagement from "../Plan/modules/PlanManagement.vue";
import CancelManagement from "../Plan/modules/CancelManagement.vue";
import Calendar from "z-calendar";
//loadsh
import lodash from "lodash";
interface restype {
  date: number | string;
  dateString: string;
  month: string;
  year: string;
}
@Component({
  components: { PlanManagement, CancelManagement },
})
export default class extends Vue {
  // 提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      // duration: 0,
      // showClose: true,
      type: "warning",
    });
  }
  // 计划状态
  planStatus = {
    '': "全部",
    0: "未执行",
    1: "执行中",
    2: "已执行",
    3: "执行失败",
  };
  // 巡检结果
  xjResult = {
    0: "告警",
    1: "正常",
    2: "漏点",
    3: "无法识别",
    4: "人工识别",
    5: "预警",
  };
  // 巡检类型
  xjType = {
    0: "未知",
    1: "例行巡检",
    2: "自定义巡检",
    3: "专项巡检",
    4: "熄灯巡检",
    5: "特殊巡检",
  };
  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    return SubstationList;
  }
  //table表格相关事件数据
  tableData = [
    {
      SSDSMC: "",
      WHBZMC: "",
      BDZMC: "",
      YHZXPC: "",
      FXFS: "",
      YHDJ: "",
      YHZT: "",
      YHNR: "",
      YHMS: "",
      KNDZHG: "",
      FZRMC: "",
      JHZGRQ: "",
    },
  ];
  //搜索框from表单数据
  public formData = {
    company: "", // 所属地市ID
    substation: "", // 变电站ID
    time: "", // 时间
  };
  // 初始化右击日历不消失
  filterInit(){
    console.log(123);
    
    this.popoverStatus=false
  }
  // 查询当前表格数据
  queryAuxRealtimeList() {
    // console.log("this.formData:", this.formData);
    let nowDate: any = new Date();
    let month = nowDate.getMonth() + 1;
    let newmonth = month > 9 ? month : "0" + month;
    let ny = nowDate.getFullYear() + "-" + newmonth;
    this.formData.time = this.formData.time == "" ? ny : this.formData.time;
    let form = {
      bdzid: this.formData.substation, // 变电站ID
      ssds: this.formData.company, // 所属地市ID
      date: this.formData.time, // 执行日期
    };
    // 加载中
    let loading = this.$loading({
      lock: true,
      text: "拼命加载中，请稍后...",
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,0.7)",
    });
    // console.log("this.formData:",this.formData);
    // console.log("form:",form);
    (this as any).$services
      .getjhglDate({ data: form, method: "get" })
      .then((result: any) => {
        loading.close();
        // console.log("result:", result);
        this.tableData = result.data;
        let data = result.data;
        // 将返回数据处理成日期对应list的格式；
        let dateObj = {};
        data.forEach((item) => {
          let key = item.JHKSSJ || "";
          if (key) {
            key = key.slice(0, 10);
            key = key.replace(/-/g, "/");
            dateObj[key] = dateObj[key] || [];
            dateObj[key].push(item);
          }
        });
        this.dateObj = dateObj;
        // console.log(dateObj);
      })
      .catch((err: object) => {
        console.log(err);
        loading.close();
        this.$message({
          type: "warning",
          message: "服务器请求错误！",
        });
      });
  }
  //日历详情查询
  toMoreDetails(val: string, data: any, index: number, text_i: number): void {
    if (val == "enter") {
      this.itemSelected = index;
      this.calendar_item_info = data;
      let posi_index = [
        4,
        5,
        6,
        11,
        12,
        13,
        18,
        19,
        20,
        25,
        26,
        27,
        32,
        33,
        34,
        39,
        40,
        41,
      ];
      if (posi_index.includes(index)) {
        this.calenderItem_x = "-295%";
        this.calenderItem_y = "15%";
      } else {
        this.calenderItem_x = "95%";
        this.calenderItem_y = "15%";
      }
    } else {
      this.itemSelected = -1;
    }
  }
  dateObj: any = {};
  // 更新日历
  get newCalendar() {
    let calendar;
    let monthList;
    if (this.formData.time != "") {
      let obj = new (Calendar as any)(this.formData.time);
      monthList = obj.monthList;
    } else {
      var nowDate: any = new Date();
      var fullYear: any = nowDate.getFullYear();
      var month: string | number = nowDate.getMonth() + 1;
      month = month > 9 ? month : "0" + month;
      let obj = new (Calendar as any)(this.formData.time);
      monthList = obj.monthList;
    }
    // console.log("monthList:", monthList);
    monthList.forEach((arr) => {
      if (arr && arr.length) {
        arr.forEach((v) => {
          v.list = this.dateObj[v.dateString] || [];
        });
      }
    });
    // 打散数组
    let res: restype[] = [].concat.apply([], monthList);
    // 不足42个的时候，补齐42个
    if (res.length < 42) {
      let i = 42 - res.length;
      for (let x = 0; x < i; x++) {
        res.push({
          date: "",
          dateString: "",
          month: "",
          year: "",
        });
      }
    }
    // console.log("res:", res);
    calendar = res;
    // this.queryAuxRealtimeList();
    return calendar;
  }
  //1.蓝色代表巡检完成，2.白色代表未巡检，3.黑色代表已执行，4.橙色代表正执行中，5.无色代表无数据
  state_color: Array<any> = [
    {
      plan_state: 1,
      color: "#0000FF",
    },
    {
      plan_state: 2,
      color: "#29ABE2",
    },
    {
      plan_state: 3,
      color: "#000",
    },
    {
      plan_state: 4,
      color: "#FF871C",
    },
    {
      plan_state: 5,
      color: "",
    },
  ];
  // 鼠标移入显示的数据
  calendar_item_info: any = {};
  //日历中弹出小弹窗的开启关闭状态
  itemSelected: number = -1;
  // 日历详情查询中单条数据的div位置， 设定目的是hover时弹窗跟随移动
  calenderItem_x: number | string = 0;
  calenderItem_y: number | string = 0;
  weeknames: Array<string> = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  // 计算日期背景颜色
  getPlanStateColor(index: number) {
    let objs = this.state_color.filter((o) => o.plan_state == index);
    let obj = objs.length > 0 && objs[0];
    let color = obj.color;
    return color;
  }

  //返回按钮
  goBack() {
    window.history.back();
  }

  // 鼠标右击
  popoverStatus = false;
  rightclickvalue: any = {};
  popoverLeft = 0;
  popoverTop = 0;
  get computedStyle() {
    let style = {
      left: `${this.popoverLeft + 5}px`,
      top: `${this.popoverTop - 190}px`,
    };
    return style;
  }
  rightclick(val, e) {
    console.log(e);
    this.rightclickvalue = val;
    this.popoverStatus = true;
    this.popoverLeft = e.clientX;
    this.popoverTop = e.clientY;
    if (e.clientX > 1700) {
      this.popoverLeft = 1700;
    }
    if (this.popoverTop > 800) {
      this.popoverTop = 800;
    }
  }
  sure(item) {
    this.popoverStatus = false;
    if (item == "update") {
      this.planManage();
    } else {
      this.planCancel();
    }
  }

  dialogVisible = false;
  management_dialogVisible = false;
  cancel_dialogVisible = false;

  planManage() {
    console.log("计划调整", this.rightclickvalue);
    let jhlx = this.rightclickvalue.XSLX;
    if (jhlx == "2") {
      if (this.rightclickvalue.STATUS != "0") {
        this.totast("自定义巡检只能调整状态为'未执行'的计划！");
        return;
      }
    } else {
      if (
        this.rightclickvalue.STATUS != "0" &&
        this.rightclickvalue.STATUS != "1"
      ) {
        var jhlxmc = "";
        if (jhlx == "1") {
          jhlxmc = "例行巡检";
        } else if (jhlx == "3") {
          jhlxmc = "专项巡检";
        } else if (jhlx == "4") {
          jhlxmc = "熄灯巡检";
        } else if (jhlx == "5") {
          jhlxmc = "特殊巡检";
        }
        this.totast(jhlxmc + "只能调整状态为'未执行'和'执行中'的计划！");
        return;
      }
    }
    if (this.rightclickvalue.SFQX == "2") {
      this.totast("已取消的计划不能进行调整！");
      return;
    }
    this.dialogVisible = true;
    this.management_dialogVisible = true;
  }
  planCancel() {
    console.log("计划取消", this.rightclickvalue);
    if (
      this.rightclickvalue.STATUS != "0" &&
      this.rightclickvalue.STATUS != "1"
    ) {
      this.totast("只能取消状态为'未执行'和'执行中'的计划！");
      return;
    }
    if (this.rightclickvalue.SFQX == "2") {
      this.totast("已取消的计划不能再进行取消！");
      return;
    }
    this.dialogVisible = true;
    this.cancel_dialogVisible = true;
  }
  handleClose() {
    this.dialogVisible = false;
    this.management_dialogVisible = false;
    this.cancel_dialogVisible = false;
  }

  mounted() {
    // 查询表格数据
    this.queryAuxRealtimeList();
  }
}
</script>

<style lang="scss" scoped>
.calenderDetails-box {
  width: 100%;
  height: 100%;
  .return-btn {
    height: 0.3rem;
    margin-top: 0.1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .return {
      width: 0.9rem;
      height: 0.3rem;
      text-align: right;
      margin-right: 0.24rem;
      > span {
        display: inline-block;
        width: 0.9rem;
        height: 0.3rem;
        background: url(../../../../assets/img/return.png) no-repeat;
        background-size: 100% 100%;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
  .con-box {
    height: calc(100% - 0.79rem);
    margin-top: 0.15rem;
    padding: 0 24px;
    .filter-box {
      height: 0.36rem;
      width: 100%;
      .subtitle-box {
        height: 0.18rem;
        .icon {
          width: 0.16rem;
          height: 0.18rem;
          background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
            no-repeat center center;
          background-size: 100% 100%;
        }
        .name {
          font-size: 0.18rem;
          margin-left: 0.06rem;
        }
      }
      .filter-1 {
        height: 0.36rem;
        width: 100%;
        margin-top: 0.1rem;
        .filter-left {
          width: 80%;
          height: 100%;
          .item {
            width: 25%;
            font-size: 0.18rem;
          }
        }
        .filter-right {
          width: 20%;
          height: 100%;
          .conditionQuryBtn {
            // margin-left: 1.8rem;
          }
          .calender-query {
            width: 0.35rem;
            height: 0.3rem;
            margin-left: 0.2rem;
            background: url("../../../../assets/img/JointInspection/calender_unfold_icon.png")
              no-repeat center center;
            background-size: 100% 100%;
            cursor: pointer;
            span {
              display: inline-block;
            }
          }
        }
      }
    }
    .table-box {
      height: calc(100% - 0.56rem);
      width: 100%;
      margin-top: 0.2rem;
      position: relative;
      .is-selected {
        color: #fff;
      }
      .date-box {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
        border: 1px solid #0a82ba;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        position: relative;
        .theader-th {
          width: 100%;
          height: 0.4rem;
          background: #174289;
          .week-box {
            width: 14.285%;
            height: 100%;
            color: #fff;
            font-size: 0.16rem;
            border-right: 1px solid #0a82ba;
          }
          .week-box:last-child {
            border-right: none;
          }
        }
        .tbody-box {
          width: 100%;
          height: calc(100% - 0.4rem);
          display: flex;
          place-content: flex-start space-between;
          flex-flow: row wrap;
          align-items: space-between;
          .tbody-td {
            width: 14.28%;
            height: 16.66%;
            border-bottom: 1px solid #fff;
            border-right: 1px solid #0a82ba;
            border-left: none;
            position: relative;
            .date-text {
              width: 0.3rem;
              height: 0.3rem;
              background: rgb(138, 134, 134);
              position: absolute;
              top: 0;
              right: 0;
              z-index: 1;
            }
            .cont-box {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
              padding: 5px auto;
              overflow: auto;
              .box {
                width: 100%;
                max-height: 100%;
                min-height: 50%;
                position: relative;
                .item {
                  width: 100%;
                  height: 0.16rem;
                  margin: 0.12rem 0;
                  cursor: pointer;
                  overflow: hidden;
                  span {
                    font-size: 0.16rem;
                  }
                }
                .item:hover span {
                  color: #18b2fc;
                  font-size: 0.18rem;
                }
              }
            }
            .details-box {
              width: 8rem;
              // height: 0.8rem;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 7;
              border: 1px solid #18b2fc;
              .header-tr {
                height: 0.4rem;
                width: 100%;
                background: #184b98;
                > div {
                  width: 23.3%;
                  height: 100%;
                  font-size: 0.18rem;
                  overflow: hidden;
                }
                > div:nth-child(2) {
                  width: 20%;
                }
                > div:nth-child(3) {
                  width: 15%;
                }
                > div:nth-child(4) {
                  width: 10%;
                }
                > div:nth-child(5) {
                  width: 10%;
                }
                > div:nth-child(6) {
                  width: 10%;
                }
              }
              .tbody-tr {
                // height: 0.4rem;
                width: 100%;
                background: #143385;
                > div {
                  width: 23.3%;
                  height: 100%;
                  font-size: 0.18rem;
                  overflow: hidden;
                  span {
                    padding: 0.09rem 0;
                  }
                }
                > div:nth-child(2) {
                  width: 20%;
                }
                > div:nth-child(3) {
                  width: 15%;
                }
                > div:nth-child(4) {
                  width: 10%;
                }
                > div:nth-child(5) {
                  width: 10%;
                }
                > div:nth-child(6) {
                  width: 10%;
                }
              }
            }
          }
          .tbody-td:nth-child(7n) {
            border-right: none;
          }
          .tbody-td:nth-child(36) {
            border-bottom: none;
          }
          .tbody-td:nth-child(37) {
            border-bottom: none;
          }
          .tbody-td:nth-child(38) {
            border-bottom: none;
          }
          .tbody-td:nth-child(39) {
            border-bottom: none;
          }
          .tbody-td:nth-child(40) {
            border-bottom: none;
          }
          .tbody-td:nth-child(41) {
            border-bottom: none;
          }
          .tbody-td:nth-child(42) {
            border-bottom: none;
          }
        }
        .popover {
          position: absolute;
          width: 1.1rem;
          height: 0.74rem;
          background: #0a82ba;
          z-index: 100;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.calenderDetails-box {
  .popover {
    .el-button + .el-button {
      margin-left: 0;
    }
  }
  // 选择框输入框的宽度
  .el-select .el-input .el-input__inner {
    width: 2.4rem;
    font-size: 0.18rem;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 2.4rem;
    font-size: 0.18rem;
  }
  //   按钮样式
  .el-button {
    width: 1.1rem;
    height: 0.36rem;
    padding: 0;
  }

  // 日历自己定义样式
  .el-calendar {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #0a82ba;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    .el-calendar__body {
      width: 100%;
      height: 100%;
      .el-calendar-table {
        width: 100%;
        height: 100%;
      }
    }
  }
  .el-calendar__header {
    display: none;
  }

  .el-calendar-table thead {
    background: #174289;
  }
  .el-calendar-table thead th {
    border-right: 1px solid #0a82ba;
    padding: 0.11rem 0;
  }
  .el-calendar-table thead th:last-child {
    border-right: onne;
  }
  .el-calendar-table .el-calendar-day {
    padding: 0;
    height: 100%;
    width: 100%;
  }
  .el-calendar-table .el-calendar-day:hover {
    cursor: auto;
    background-color: rgba(0, 0, 0, 0.35);
  }
  .el-calendar-table td {
    height: 16.66%;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #0a82ba;
    border-left: none;
  }
  .el-calendar-table tr td:first-child {
    border-left: none;
  }
  .el-calendar-table tr:last-child td {
    border-bottom: none;
  }
  .el-calendar-table tr:first-child td {
    border-top: none;
  }
  .el-calendar__body {
    padding: 0;
  }
  .el-calendar-table td.is-selected {
    background-color: rgba(0, 0, 0, 0.55);
  }
  .el-calendar-table td.is-today {
    color: #fff;
  }
  .calenderDetails-box .el-calendar-table td.is-selected {
    background-color: rgba(0, 0, 0, 0);
  }
}
</style>

